define(function (require, exports, module) {

    var mCard = require('andrew/card/index.js');
    // var Element = require('third/element/index.js')
    var _ = require("third/lodash.js");
    var toastr = require("third/toastr/index.js");

    var app = new Vue({
        el: '#app',
        // mixins: [Element.mixin],
        data: function () {
            return {
                dataList: []
            }
        },
        mounted: function () {

            //按order排序好
            this.getDataList();

            this.dataList = _.orderBy(this.dataList, ['order'], ['asc']);
            console.log(this.dataList);

            Vue.nextTick(function () {
                $('.kindeditor_textarea').each(function () {
                    KindEditor.create(this, {
                        allowFileManager: true,
                        afterChange: function () {
                            this.sync();
                        }
                    });
                });
            });

        },
        methods: {
            getDataList: function () {
                this.dataList = [{
                    id: 1,
                    content: '<strong>1</strong>',
                    imgType: 1,
                    imgUrlOne: 'https://pavo.elongstatic.com/i/tHotel800_600/nw_0005mmPP.jpg',
                    imgUrlTwo: 'https://pavo.elongstatic.com/i/tHotel800_600/0000C3BV.jpg"',
                    imgUrlThree: 'https://pic4.40017.cn/line/admin/2017/02/10/10/gd0MOy_640x360_00.jpg',
                    dataFlag: 1,
                    order: 0
                }, {
                    id: 3,
                    content: '<strong>3</strong>',
                    imgType: 3,
                    imgUrlOne: 'https://pavo.elongstatic.com/i/tHotel800_600/nw_0005mmPP.jpg',
                    imgUrlTwo: 'https://pavo.elongstatic.com/i/tHotel800_600/0000C3BV.jpg"',
                    imgUrlThree: 'https://pic4.40017.cn/line/admin/2017/02/10/10/gd0MOy_640x360_00.jpg',
                    dataFlag: 1,
                    order: 1
                }, {
                    id: 2,
                    content: '<strong>2</strong>',
                    imgType: 1,
                    imgUrlOne: 'https://pavo.elongstatic.com/i/tHotel800_600/nw_0005mmPP.jpg',
                    imgUrlTwo: 'https://pavo.elongstatic.com/i/tHotel800_600/0000C3BV.jpg"',
                    imgUrlThree: 'https://pic4.40017.cn/line/admin/2017/02/10/10/gd0MOy_640x360_00.jpg',
                    dataFlag: 1,
                    order: 2
                }]
            },
            addPart: function (newPart) {

                var new_id = 'new_' + new Date().getTime();

                var newPart = newPart || {
                    id: new_id,
                    content: '',
                    imgType: 1,
                    imgUrlOne: '',
                    imgUrlTwo: '',
                    imgUrlThree: '',
                    dataFlag: 1

                };


                if (newPart.id.toString().indexOf("new_") > -1) {
                    this.dataList.push(newPart);
                } else {
                    this.dataList.push(newPart);
                    this.dataList.splice(newPart.order, 0, newPart);
                }


                Vue.nextTick(function () {
                    KindEditor.create($("[area-id='" + new_id + "']"), {
                        allowFileManager: true,
                        afterChange: function () {
                            this.sync();

                        }
                    });

                });
            },
            refreshOrder: function () {
                var len = $("[area-id]").length;
                $("[area-id]").each(function () {
                    var id = $(this).attr("area-id") || "";
                    var curPart = _.find(app.dataList, { id: id });
                    curPart.order = len;
                    len = len - 1;
                });

            },
            gatherInit() {
                console.log($("[area-id]").length);
                var len = 0;
                $("[area-id]").each(function () {
                    var content = $(this).val();
                    var id = $(this).attr("area-id") || "";
                    console.log(id);
                    var curPart = _.find(app.dataList, { id: id });
                    curPart.content = content;
                    curPart.order = len;
                    len = len + 1;

                    if (curPart.id.indexOf("new") > -1) {
                        curPart.id = 0;
                    }
                    console.log(curPart);
                });

                console.log(this.dataList);
            },
            up: function (order) {


                alert(order);

                // order最小为1 
                if (order == 0) {
                    toastr.error("已至顶!");
                    return false;
                }



                //把自己order-1
                var preIndex = order - 1;
                this.dataList[order].order = preIndex;
                this.dataList[preIndex].order = order;

                this.addPart(this.dataList[order]);

                // this.dataList = _.orderBy(this.dataList, ['order'], ['asc']);

                // console.log(this.dataList);

                //找到自身 card
                // var cardDom = $("[card-id='" + id + "']");
                // var preCardDom = cardDom.prev(".m-card");

                // if (preCardDom.length == 0) {
                //     toastr.error("已至顶!");
                //     return false;
                // }


                // $(preCardDom).attr("area-id");

                // cardDom.insertBefore(preCardDom);


                // console.log(preCardDom);

            },
            submitFun: function () {

                this.gatherInit();

                console.log(this.dataList);
            }
        }

    });


});